.<template>
  <div class="brand-header">
    <el-card class="card box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索栏</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="find.cname"
            size="small"
            placeholder="根据用户名进行查询"
          />
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="find.tel"
            size="small"
            placeholder="根据电话进行查询"
          />
        </el-col>
        <el-col :span="6" :offset="3">
          <el-button size="small">重置</el-button>
          <el-button type="primary" size="small" @click="doFind">查询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <div class="container card">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <!-- <span>卡片名称</span> -->
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
          <el-button type="primary" size="small" @click="dialog = true">新增</el-button>
        </div>

        <el-row v-loading="loading" :gutter="20">
          <el-col v-for="item in brandList" :key="item.id" class="imgscard" :span="6">
            <el-card shadow="hover">
              <div slot="header" class="clear">
                <span>{{ item.cname }}</span>
                <el-button type="primary" size="mini" @click="delItem(item.id)">删除</el-button>
              </div>
              <img class="coverimg" :src="item.coverImg" alt="">
            </el-card>
          </el-col>
        </el-row>

        <div class="block">
          <!-- <span class="demonstration">分页</span> -->
          <el-pagination
            :current-page="page.start"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <el-dialog
      title="品牌新增"
      :visible.sync="dialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="品牌名称">
          <el-input v-model="form.cname" size="small" style="width:300px" type="primary" placeholder="品牌名称" />
        </el-form-item>
        <el-form-item label="英文名称">
          <el-input v-model="form.ename" size="small" style="width:300px" type="primary" placeholder="英文名称" />
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            action="/api/leju/admin/material/uploadImg"
            :on-success="onUploadSucc"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

          <div><img :src="form.coverImg" style="width:200px;"><span class="imgsdel" @click="imgsDelate">移除</span></div>
        </el-form-item>
        <el-form-item label="品牌描述">
          <el-input v-model="form.descr" size="small" style="width:300px" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { brandList, saveBrand, delBrand } from '@/api/brand/index'
import { removeFile } from '@/api/material/index'
export default {
  name: 'BrandList',
  data() {
    return {
      fileList: [],
      dialog: false,
      loading: false,
      find: {
        cname: '',
        tel: ''
      },
      form: {
        cname: '',
        ename: '',
        coverImg: '',
        descr: '',
        tel: ''
      },
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0
      },
      brandList: []
    }
  },
  created() {
    this.getBrandList()
  },
  methods: {
    getBrandList() {
      this.loading = true
      brandList({
        ...find,
        start: this.page.start,
        limit: this.page.limit
      }).then(res => {
        console.log(res)
        this.brandList = res.data.list
        this.page.totalCount = res.data.totalRow
        this.loading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.limit = val
      this.getBrandList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.start = val
      this.getBrandList()
    },
    // 图片上传成功后的回调
    onUploadSucc(response, file, fileList) {
      console.log(response)
      this.tempId = response.fileName
      this.filePath = response.filePath
      this.fileName = response.fileName
      this.form.coverImg = response.ossUrl
      this.$message.success('上传成功')
      this.$refs.upload.clearFiles()
    },
    // 删除图片
    imgsDelate() {
      removeFile({
        filePath: this.filePath,
        fileName: this.fileName
      }).then(res => {
        console.log(res)
        this.$message.success('移除成功')
        this.form.coverImg = ''
      })
    },
    // 新增
    add() {
      saveBrand({
        ...this.form
      }).then(res => {
        this.$message.success('新增成功')
        this.form = ''
        this.dialog = false
        this.getBrandList()
      })
    },
    // 删除
    delItem(id) {
      this.$confirm('确认删除？').then((_) => {
        delBrand({ id }).then(res => {
          this.$message.success('删除完成！')
          this.getBrandList()
        })
      })
        .catch(_ => {})
    },
    doFind() {
      this.page.start = 1
      this.getBrandList()
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialog = false
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  .card {
      margin: 30px;
  }
  .block{
    text-align:right;
    margin:30px;
  }
  .imgscard{
    margin:10px 0;
  }
  .coverimg{
      width:240px;
      height: 300px;
      border-radius: 20px;
    }

    .imgsdel{
      color:red;
    }
    .imgsdel:hover{
      cursor: pointer;
    }

</style>
